import { FC } from "react";
import { View } from "@tarojs/components";
import { HUpload } from "@/components";
import Form, { Field, FormInstance } from "rc-field-form";
import styles from "./index.module.less";
import { AtButton } from "taro-ui";
import { UserInfo } from "@/service/type";
import { validateErrorHandler } from "@/utils/validate";

interface IProps {
  form: FormInstance<UserInfo>;
  userInfo: Partial<UserInfo>;
  onSave: (data: Partial<UserInfo>) => void;
}

const PhotoIndex: FC<IProps> = ({ form, userInfo, onSave }) => {
  return (
    <View className={styles["photo-wrapper"]}>
      <View className={styles["title"]}>个性照片墙</View>
      <Form
        form={form}
        component={View}
        onFinishFailed={validateErrorHandler}
        onFinish={() => onSave(form.getFieldsValue())}
      >
        <Field
          name="headImg"
          rules={[{ required: true, message: "请先上传照片" }]}
          children={({ value }) => (
            <HUpload
              className={styles["upload"]}
              imgStyle={styles["avator"]}
              count={1}
              defaultValue={value.split(",")}
              // onSuccess={(list) => onSetFieldValue("headImg", list.join())}
              // onRemove={(list) => onSetFieldValue("headImg", list.join())}
            />
          )}
        ></Field>
        <AtButton className={styles["btn"]} onClick={form.submit}>
          保存
        </AtButton>
      </Form>
    </View>
  );
};

export default PhotoIndex;
